import React, { ReactElement, useState, useEffect } from 'react'
import { Button, Modal, Input, Table, Row, Col } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import styles from './banner.less'
import { getRestAds, addRestAds } from '@/api/banner'
import BannerCard from '@/components/BannerCard'
import { connect } from 'umi'

const columns = [
    {
        title: '广告位名称',
        dataIndex: 'name',
        align: 'center',
        className: styles.fontcolor
    },
    {
        title: '操作',
        dataIndex: 'money',
        align: 'center',
        className: styles.fontcolor,
        render: () => {
            return <div>
                {/* <Space> */}
                    <Button type="primary">编辑</Button>
                    <Button type="primary" danger>删除</Button>
                {/* </Space> */}
            </div>
        }
    }
];

interface Props {
    list?: any,
    addCard: any
}

function Banner({ list, addCard }: Props): ReactElement {
    const [visible, setVisible] = useState(false);
    const [name, setName] = useState("");
    const [bannerList, setBanner] = useState([])

    function init() {
        getRestAds().then((res: any) => {
            let arr = res
            arr.forEach((item: any, index: number) => {
                item.key = index
            })
            setBanner(arr)
        })
    }

    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            <Button className={styles.mb15} type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)}>
                添加广告位
            </Button>
            <Modal
                title="添加广告位"
                // centered
                visible={visible}
                onOk={() => {
                    addRestAds({
                        items: [],
                        name
                    }).then(res => {
                        init()
                    })
                    setVisible(false)
                }}
                onCancel={() => setVisible(false)}
                width={1000}
            >
                <p className={styles.banner_nav}>
                    <span>
                        广告位名称
                    </span>
                    <Input value={name} onChange={(ev) => {
                        setName(ev.target.value)
                    }} />
                </p>
                <Button type="primary"
                    icon={<PlusOutlined />}
                    className={styles.mb15}
                    onClick={() => {
                        let obj = {
                            index: list.length + 1
                        }
                        addCard(obj)
                    }}
                >
                    添加广告位信息
                </Button>
                <div className={list.length > 0 ? "site-card-border-less-wrapper" : ""}>

                    <Row gutter={16}>
                        {
                            list.map((item: any) => {
                                return  <Col key={item.index} span={8}>
                                        <BannerCard index={item.index}  />
                                    </Col>
                            })
                        }
                    </Row>
                </div>

            </Modal>
            <Table
                columns={columns}
                dataSource={bannerList}
                bordered
            />
        </div>
    )
}

const mapState = (state: any) => {
    return {
        list: state.banner.list
    }
}

const mapDispatch = (dispatch: any) => {
    return {
        addCard(obj: any) {
            dispatch({ type: "banner/addCard", obj })
        }
    }
}

export default connect(mapState, mapDispatch)(Banner)

// items: [{img: "http://10.20.151.197:3333/uploads/ads/151c58cd133a6be7767a04a2821fe027", url: "123"}]
// 0: {img: "http://10.20.151.197:3333/uploads/ads/151c58cd133a6be7767a04a2821fe027", url: "123"}
// name: "444"
